<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../style/editor.css" rel="stylesheet" type="text/css">
<script>
	var sLangDir=window.opener.oUtil.langDir;
	document.write("<scr"+"ipt src='../language/"+sLangDir+"/source_html.js'></scr"+"ipt>");
</script>
<script>writeTitle()</script>
<script>

var iconOffsetTop = -75;

var sBaseHREF="";

function doCmd(sCmd,sOption)
  {
    var idSource = document.getElementById("idSource").contentWindow;
    idSource.document.execCommand(sCmd, false, sOption);
  }
  
function bodyOnLoad()
  {
  var oEditor=window.opener.oUtil.oEditor;
  
  //base handling
  sHTML=window.opener.getOuterHTML(oEditor.document.documentElement);
  var arrTmp=sHTML.match(/<BASE([^>]*)>/ig);
  if(arrTmp!=null)sBaseHREF=arrTmp[0];
  var arrBase = oEditor.document.getElementsByTagName("BASE");
  if (arrBase.length != null) {
    for(var i=0; i<arrBase.length; i++) {
      arrBase[i].parentNode.removeChild(arrBase[i]);
    }
  }
  //~~~~~~~~~~~~~

  sHTML=recur(oEditor.document.documentElement,"");
  
  //restore doctype (if any) & html
  var obj = window.opener.oUtil.obj;
  sHTMLDocType=obj.docType;
  if(sHTMLDocType!="")
    {
    //sHTMLDocType=sHTMLDocType.replace(/DOCTYPE/g,"doctype");
    sHTMLDocType=sHTMLDocType.replace(/</g,"&lt;");
    sHTMLDocType=sHTMLDocType.replace(/>/g,"&gt;");
    sHTMLDocType="<font color='#000000'>"+sHTMLDocType+"</font>";
    }
  else sHTMLDocType="";

  sHTMLOpenTag=obj.html;
  sHTMLOpenTag=sHTMLOpenTag.replace(/HTML/g,"html");
  sHTMLOpenTag=sHTMLOpenTag.replace(/</g,"&lt;");
  sHTMLOpenTag=sHTMLOpenTag.replace(/>/g,"&gt;");
  sHTMLOpenTag="<font color='#000000'>"+sHTMLOpenTag+"</font>";
  
  sHTMLCloseTag= "<font color='#000000'>&lt;/html&gt;</font>";
  
  //construct
  if(sHTMLDocType!="")
    sHTML = sHTMLDocType + "<br>" + sHTMLOpenTag + sHTML + "<br>" + sHTMLCloseTag;
  else
    sHTML = sHTMLOpenTag + sHTML + "<br>" + sHTMLCloseTag;
    
  //Display
  var idSource = document.getElementById("idSource").contentWindow;
  var sourceDocBody = idSource.document.body;

  //remove all child
  sourceDocBody.innerHTML = "";
  sourceDocBody.innerHTML = sHTML;

  sourceDocBody.style.cssText="overflow-x:scroll;overflow-y:scroll;white-space:nowrap";
  sourceDocBody.clearAttributes;
  sourceDocBody.style.marginTop='4';
  sourceDocBody.style.marginLeft='10';
  sourceDocBody.style.fontFamily='Tahoma';
  sourceDocBody.style.fontSize='11px';
  sourceDocBody.style.color='black';
  sourceDocBody.style.background='white';
  //idSource.document.addEventListener("keydown", new Function("doKeyPress(arguments[0])"), false);

  doWrap()

  idSource.document.designMode="on";
  idSource.focus();

  }
  
function doKeyPress(evt)
  {
  /*
  if (evt.keyCode==13)
    {
    var thisSel = document.selection.createRange();
    thisSel.pasteHTML('<br>');
    evt.cancelBubble = true;
    evt.returnValue = false;
    thisSel.select();
    thisSel.moveEnd("character", 1);
    thisSel.moveStart("character", 1);
    thisSel.collapse(false);
    return false;
    idSource.focus();
    }
  if (evt.ctrlKey)
    {
    if(evt.keyCode==65)doCmd("SelectAll");
    }
  */
  }

function doUpdate()
  {
  window.opener.oUtil.obj.saveForUndo();
  
  var obj = window.opener.oUtil.obj;
  
  var idSource = document.getElementById("idSource").contentWindow;
  var range = idSource.document.body.ownerDocument.createRange();
  range.selectNodeContents(idSource.document.body);
  var sHTML = range.toString();
  sHTML = sHTML.replace(/>\s+</gi, "><"); //replace space between tag
  sHTML = sHTML.replace(/\r/gi, ""); //replace space between tag
  sHTML = sHTML.replace(/(<br>)\s+/gi, "$1"); //replace space between BR and text
  sHTML = sHTML.replace(/(<br\s*\/>)\s+/gi, "$1"); //replace space between BR and text
  //sHTML = sHTML.replace(/\s+(<)/gi, "$1"); //replace space between BR and text
  //sHTML = sHTML.replace(/(>)\s+/gi, "$1"); //replace space between BR and text

  //base otomatis akan diposisikan di dlm head
  var sHTML = sBaseHREF+sHTML;
  sHTML = sHTML.replace(/\s+/gi, " "); //replace spaces with space
  obj.putHTML(sHTML);//tdk menggunakan loadHTML() krn loadHTML() hanya utk first load.
  }

/************************
  HTML to XHTML (formatted)
************************/
function lineBreak2(tag) //[0]<TAG>[1]text[2]</TAG>
  {
  arrReturn = ["<br>","",""];
  if( tag=="A"||tag=="B"||tag=="CITE"||tag=="CODE"||tag=="EM"|| 
    tag=="FONT"||tag=="I"||tag=="SMALL"||tag=="STRIKE"||tag=="BIG"||
    tag=="STRONG"||tag=="SUB"||tag=="SUP"||tag=="U"||tag=="SAMP"||
    tag=="S"||tag=="VAR"||tag=="BASEFONT"||tag=="KBD"||tag=="TT"||tag=="SPAN") 
    arrReturn=["","",""];

  if( tag=="TEXTAREA"||tag=="TABLE"||tag=="THEAD"||tag=="TBODY"|| 
    tag=="TR"||tag=="OL"||tag=="UL"||tag=="DIR"||tag=="MENU"|| 
    tag=="FORM"||tag=="SELECT"||tag=="MAP"||tag=="DL"||tag=="HEAD"|| 
    tag=="BODY"||tag=="HTML") 
    arrReturn=["<br>","","<br>"];

  if( tag=="STYLE"||tag=="SCRIPT")
    arrReturn=["<br>","",""];

  if(tag=="BR"||tag=="HR") 
    arrReturn=["","<br>",""];

  return arrReturn;
  }
function fixAttr(s)
  {
  s = String(s).replace(/&/g, "&amp;amp;");//harus di awal
  s = String(s).replace(/</g, "&amp;lt;");
  //s = String(s).replace(/>/g, "&amp;gt;");//tdk apa2
  s = String(s).replace(/"/g, "&amp;quot;");
  //s = String(s).replace(/'/g, "&amp;apos;");//tdk apa2
  return s;
  }
function fixVal(s)
	{
	s = String(s).replace(/&/g, "&amp;amp;");//harus di awal
	s = String(s).replace(/</g, "&amp;lt;");
	var x = escape(s);	
	x = unescape(x.replace(/\%A0/gi, "-*REPL*-"));
	s = x.replace(/-\*REPL\*-/gi, "&nbsp;");

	return s;
	}
function recur(oEl,sTab)
  {
  var sHTML="";
  for(var i=0;i<oEl.childNodes.length;i++)
    {
    var oNode=oEl.childNodes[i];
    if(oNode.nodeType==1)//tag
      {
      var sTagName = oNode.nodeName;
      
      var bDoNotProcess=false;
      if(sTagName.substring(0,1)=="/")
        {
        bDoNotProcess=true;//do not process
        }
      else
        {
        /*** tabs ***/
        var sT= sTab;
        sHTML+= lineBreak2(sTagName)[0];  
        if(lineBreak2(sTagName)[0] !="") sHTML+= sT;//If new line, use base Tabs
        /************/
        }

      if(bDoNotProcess)
        {
        ;//do not process
        }
      else if(sTagName=="OBJECT" || sTagName=="EMBED")
        {   
        s=window.opener.getOuterHTML(oNode);

        s=s.replace(/\"[^\"]*\"/ig,function(x){           
            x=x.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/'/g, "&apos;").replace(/\s+/ig,"#_#");
            return x});
        s=s.replace(/<([^ >]*)/ig,function(x){return x.toLowerCase()})            
        s=s.replace(/ ([^=]+)=([^"' >]+)/ig," $1=\"$2\"");//new
        
        s=s.replace(/ ([^=]+)=/ig,function(x){return x.toLowerCase()});
        s=s.replace(/#_#/ig," ");
  
        s=s.replace(/<param([^>]*)>/ig,"\n<param$1 />").replace(/\/ \/>$/ig," \/>");//no closing tag
        
        if(sTagName=="EMBED")
          if(oNode.innerHTML=="")
            s=s.replace(/>$/ig," \/>").replace(/\/ \/>$/ig,"\/>");//no closing tag
        
        s=s.replace(/<param name=\"Play\" value=\"0\" \/>/,"<param name=\"Play\" value=\"-1\" \/>")
        
        //sSelThis="";//selThis
        //if(oElement==oNode)sSelThis=" selThis='selThis'"        
        
        /*** format ***/ //selThis
        sHTML+="<span style='color:#555555;background:#f7f7f7'><xmp style='font-family:tahoma;margin-top:0px;margin-bottom:0px;'>"+s+"</xmp></span>";
        /**************/
        }
      else if(sTagName=="TITLE")
        {
        //s="<title>"+oNode.innerHTML+"</title>";

        /*** format ***/      
        sHTML+="<font color='#0000cc'>&lt;<\/font><font color='#8b4513'>title</font>"+
          "<font color='#0000cc'>&gt;<\/font>" + oNode.innerHTML +
          "<font color='#0000cc'>&lt;/</font><font color='#8b4513'>title</font>"+
          "<font color='#0000cc'>&gt;</font>";        
        /**************/
        }
      else
        {
        if(sTagName=="AREA")
          {
          var sCoords=oNode.coords;
          var sShape=oNode.shape;
          }

        var oNode2=oNode.cloneNode(false);//hasil: <tag..>..</tag>       
        s=window.opener.getOuterHTML(oNode2).replace(/<\/[^>]*>/,"");//hasil: <tag..>
        
        if(sTagName=="STYLE")//hasil: <tag..>..
          {
          var arrTmp=s.match(/<[^>]*>/ig);
          s=arrTmp[0];//hasil: <tag..>
          }       

        s=s.replace(/\"[^\"]*\"/ig,function(x){
            //x=x.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/'/g, "&apos;").replace(/\s+/ig,"#_#");
            x=x.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\s+/ig,"#_#");
            return x});
        s=s.replace(/<([^ >]*)/ig,function(x){return x.toLowerCase()})            
        s=s.replace(/ ([^=]+)=([^" >]+)/ig," $1=\"$2\"");
        s=s.replace(/ ([^=]+)=/ig,function(x){return x.toLowerCase()});
        s=s.replace(/#_#/ig," ");

        //single attribute
        s=s.replace(/[<hr]?(noshade="")/ig,"noshade=\"noshade\"");
        s=s.replace(/[<input]?(checked="")/ig,"checked=\"checked\"");
        s=s.replace(/[<select]?(multiple="")/ig,"multiple=\"multiple\"");
        s=s.replace(/[<option]?(selected="")/ig,"selected=\"true\"");
        s=s.replace(/[<input]?(readonly="")/ig,"readonly=\"readonly\"");
        s=s.replace(/[<input]?(disabled="")/ig,"disabled=\"disabled\"");
        s=s.replace(/[<td]?(nowrap="" )/ig,"nowrap=\"nowrap\" ");        
        s=s.replace(/[<td]?(nowrap=""\>)/ig,"nowrap=\"nowrap\"\>");          
        
        s=s.replace(/ contenteditable=\"true\"/ig,"");
        
        if(sTagName=="AREA")
          {
          s=s.replace(/ coords=\"0,0,0,0\"/ig," coords=\""+sCoords+"\"");
          s=s.replace(/ shape=\"RECT\"/ig," shape=\""+sShape+"\"");
          }
          
        var bClosingTag=true;
        if(sTagName=="IMG"||sTagName=="BR"||
          sTagName=="AREA"||sTagName=="HR"|| 
          sTagName=="INPUT"||sTagName=="BASE"||
          sTagName=="LINK"||sTagName=="META")//no closing tag
          {
          s=s.replace(/>$/ig," \/>").replace(/\/ \/>$/ig,"\/>");//no closing tag
          bClosingTag=false;      
          }

        //sSelThis="";//selThis
        //if(oElement==oNode)sSelThis=" selThis='selThis'"
        
        /*** format ***/  //selThis
        //sA1="<span"+sSelThis+"><font color='#0000cc'>&lt;<\/font><font color='#8b4513'>"
        sA1="<span><font color='#0000cc'>&lt;<\/font><font color='#8b4513'>"
        sA2="<\/font>"
        sA3="<font color='#0000cc'>&gt;<\/font>"    
        sA4="<font color='#0000cc'>/&gt;<\/font>"       
        s=s.replace(/<([^ >]*)([^ \/>]*)/ig,sA1+"$1"+sA2+"$2");
        //s=s.replace(/\/>$/ig,sA4);//if there is no closing tag
        s=s.replace(/>$/ig,sA3);
        /**************/

        sHTML+=s; 
        
        if(!bClosingTag)sHTML+="</span>";//selThis
          
        /*** tabs ***/
        if(sTagName!="TEXTAREA")sHTML+= lineBreak2(sTagName)[1];
        if(sTagName!="TEXTAREA")if(lineBreak2(sTagName)[1] !="") sHTML+= sT;//If new line, use base Tabs
        /************/  
        
        if(bClosingTag)
          {
          /*** CONTENT ***/
          s=window.opener.getOuterHTML(oNode);
          if(sTagName=="SCRIPT")
            {
            s = s.replace(/<script([^>]*)>[\n+\s+\t+]*/ig,"<script$1>");//clean spaces
            s = s.replace(/[\n+\s+\t+]*<\/script>/ig,"<\/script>");//clean spaces
            s = s.replace(/<script([^>]*)>\/\/<!\[CDATA\[/ig,"");
            s = s.replace(/\/\/\]\]><\/script>/ig,"");
            s = s.replace(/<script([^>]*)>/ig,"");
            s = s.replace(/<\/script>/ig,"");         
            s = s.replace(/^\s+/,'').replace(/\s+$/,'');            
            /*** format ***/
            sHTML+="<div><span style='color:#828282;'>//&lt;![CDATA[<xmp style='font-family:tahoma;margin-top:0px;margin-bottom:0px;'>"+s+"</xmp>//]]&gt;</span></div>";
            /**************/
            }
          if(sTagName=="STYLE")
            {
            s = s.replace(/<style([^>]*)>[\n+\s+\t+]*/ig,"<style$1>");//clean spaces
            s = s.replace(/[\n+\s+\t+]*<\/style>/ig,"<\/style>");//clean spaces
            s = s.replace(/<style([^>]*)><!--/ig,"");
            s = s.replace(/--><\/style>/ig,"");
            s = s.replace(/<style([^>]*)>/ig,"");
            s = s.replace(/<\/style>/ig,"");          
            s = s.replace(/^\s+/,"").replace(/\s+$/,"");      
            /*** format ***/
            sHTML+="<div><span style='color:#828282;'>&lt;!--<xmp style='font-family:tahoma;margin-top:0px;margin-bottom:0px;'>"+s+"</xmp>--&gt;</span></div>";
            /**************/
            }
          if(sTagName=="DIV"||sTagName=="P")
            {
            if(oNode.innerHTML==""||oNode.innerHTML=="&nbsp;") 
              {
              sHTML+="&amp;nbsp;";
              }
            else sHTML+=recur(oNode,sT+"&nbsp;&nbsp;");
            }
          else
          if (sTagName == "STYLE" || sTagName=="SCRIPT")
            {
            //do nothing
            }
          else
            {
            sHTML+=recur(oNode,sT+"&nbsp;&nbsp;");  
            }         
            
          /*** tabs ***/
          if(sTagName!="TEXTAREA")sHTML+= lineBreak2(sTagName)[2];
          if(sTagName!="TEXTAREA")if(lineBreak2(sTagName)[2] !="") sHTML+= sT;//If new line, use base Tabs
          /************/
            
          /*** format ***/ //selThis
          sHTML+="<font color='#0000cc'>&lt;/</font><font color='#8b4513'>" + sTagName.toLowerCase() + "</font><font color='#0000cc'>&gt;</font></span>";
          /**************/
          }     
        }
      }
    else if(oNode.nodeType==3)//text
      {
      sHTML+= fixVal(oNode.nodeValue);  
      }
    else if(oNode.nodeType==8)
      {
      if(window.opener.getOuterHTML(oNode).substring(0,2)=="<"+"%")
        {//server side script
        sTmp=(window.opener.getOuterHTML(oNode).substring(2))
        sTmp=sTmp.substring(0,sTmp.length-2)
        sTmp=sTmp.replace(/^\s+/,"").replace(/\s+$/,"");
        sHTML+= "<div><span style='background:yellow'>&lt;%<xmp style='font-family:tahoma;margin-top:0px;margin-bottom:0px;'>"+sTmp+"</xmp>%&gt;</span></div>";
        }
      else
        {//comments
        sTmp=oNode.nodeValue;
        sTmp = sTmp.replace(/^\s+/,"").replace(/\s+$/,"");
        sHTML+= "<div><span style='color:#828282;'>&lt;!--<xmp style='font-family:tahoma;margin-top:0px;margin-bottom:0px;'>"+sTmp+"</xmp>--&gt;</span></div>";
        }
      }
    else
      {
      ;//Not Processed
      }
      
    }
  return sHTML;
  }
  
function doWrap()
    {
    var inpWrap = document.getElementById("inpWrap");
    if(inpWrap.checked==true)
        {
        //Wrap Text
        idSource.document.body.style.whiteSpace="normal";
        }
    else
        {
        idSource.document.body.style.whiteSpace="nowrap";
        }
    }
    
//*******************
var buttonArrays=new Object();

function writeIconStandard(id,command,img,title)
    {
    var obj = window.opener.oUtil.obj;
    var w=obj.iconWidth;
    var h=obj.iconHeight;
    var imgPath=obj.iconPath+img;
    var sHTML=""+
        "<td unselectable='on' style='padding-right:1px;VERTICAL-ALIGN: top;margin-left:0;margin-right:1px;margin-bottom:1px;width:"+w+"px;height:"+h+"px;'>"+
        "<span unselectable='on' style='position:absolute;clip: rect(0 "+w+"px "+h+"px 0)'>"+
        "<img name=\""+id+"\" id=\""+id+"\" unselectable='on' src='"+imgPath+"' style='position:absolute;top:"+iconOffsetTop+"px;width:"+w+"px'"+
        "onmouseover='doOver(this)' "+
        "onmouseout='doOut(this)' "+
        "onmousedown='doDown(this)' "+
        "onmouseup=\"if(doUp(this)){"+command+"}\" alt=\""+title+"\">"+
        "</span></td>";
    sHTML="<table align=left cellpadding=0 cellspacing=0 style='table-layout:fixed;'><tr>"+sHTML+"</tr></table>";
    buttonArrays[id] = ["inactive"];
    return sHTML;
    }
    
function writeBreakSpace()
    {
    var obj = window.opener.oUtil.obj;
    var w=obj.iconWidth;
    var h=obj.iconHeight;
    var imgPath=obj.iconPath+"brkspace.gif";
    var sHTML=""+
        "<td unselectable='on' style='padding-left:0px;padding-right:0px;VERTICAL-ALIGN:top;margin-bottom:1px;width:5px;height:"+h+"px;'>"+
        "<img unselectable='on' src='"+imgPath+"'></td>";
    sHTML="<table align=left cellpadding=0 cellspacing=0 style='table-layout:fixed;'><tr>"+sHTML+"</tr></table>";
    return sHTML;
    }
    
function setupToolbar()
    {
    var obj = window.opener.oUtil.obj;
    var imgPath=obj.iconPath+"bg.gif";
    
    var sHTMLIcons="";
    sHTMLIcons+=writeIconStandard("btnUndo","doCmd('Undo')","btnUndo.gif",getTxt("Undo"));
    sHTMLIcons+=writeIconStandard("btnRedo","doCmd('Redo')","btnRedo.gif",getTxt("Redo"));
    sHTML="<table border=0 cellpadding=0 cellspacing=0 width='100%'>"+
        "<tr><td style=\"padding-left:1px;padding-bottom:2px\">"+
        "<table cellpadding=0 cellspacing=0 width=100%><tr><td dir=ltr style=\"background:url('"+imgPath+"')\">"+
        sHTMLIcons+
        "</td></tr></table>"+
        "</td></tr></table>";
    document.getElementById("idToolbar").innerHTML=sHTML;
    }
    
function doOver(btn)
    {
    btnArr=buttonArrays[btn.id];
    if(btnArr[0]=="inactive")btn.style.top=(-25+iconOffsetTop)+"px";//no.2
    }
function doDown(btn)
    {
    btnArr=buttonArrays[btn.id];
    if(btnArr[0]!="disabled")btn.style.top=(-50+iconOffsetTop)+"px";//no.3
    }
var bCancel=false;
function doOut(btn)
    {
    if(btn.style.top==((-50+iconOffsetTop)+"px"))
        {
        //lagi pushed tapi mouseout (cancel)
        bCancel=true;
        }

    btnArr=buttonArrays[btn.id];
    if(btnArr[0]=="active")btn.style.top=(-75+iconOffsetTop)+"px";//no.4 (remain active/pushed)
    if(btnArr[0]=="inactive")btn.style.top=(0+iconOffsetTop)+"px";//no.1 (remain inactive)
    }
function doUp(btn)//return true/false
    {
    if(bCancel)
        {
        //lagi pushed tapi mouseout (cancel)
        bCancel=false;btn.style.top=(0+iconOffsetTop)+"px";
        return false;
        }
    btnArr=buttonArrays[btn.id];
    if(btnArr[0]=="disabled") return false;
    btn.style.top=(-25+iconOffsetTop)+"px";//no.2
    return true;
    }
//*******************
function modelessDialogShow(url,width,height)
    {
    window.showModelessDialog(url,window,
        "dialogWidth:"+width+"px;dialogHeight:"+height+"px;edge:Raised;center:1;help:0;resizable:1;");
    }
    
</script>
</head>
<body onload="setupToolbar();loadTxt();bodyOnLoad()" style="overflow:hidden;margin:0;background: #f4f4f4;">

<table width="100%" height="100%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td id="idToolbar">

</td>
</tr>
<tr>
<tr>
<td style="height:100%">
  <iframe style="width:100%;height:100%;" name="idSource" id="idSource"></iframe>    
</td>
</tr>
<tr>
<td class="dialogFooter" style="padding:13;padding-top:7;padding-bottom:7;" align="right" valign="right">
  <table cellpadding=1 cellspacing=0>
  <td width="100%">
    &nbsp;<input type="checkbox" ID="inpWrap" NAME="inpWrap" onclick="doWrap()" checked> <span id="txtLang" name="txtLang">Wrap Text</span>
  </td>
  <td>
    <input type="button" name="btnCancel" id="btnCancel" value="cancel" onclick="self.close()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
  </td>
  <td>
    <input type="button" name="btnApply" id="btnApply" value="apply" onclick="doUpdate();bodyOnLoad()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
  </td>
  <td>
    <input type="button" name="btnOk" id="btnOk" value=" ok " onclick="doUpdate();self.close()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
  </td>
  </table>
</td>
</tr>
</table>

</body>
</html>